<template>
 <div class="error_page">
  <div>
    <Result :status="is404?404:(abortStatusCode?abortStatusCode:500)" :title="is404?404:(abortStatusCode?abortStatusCode:500)" :sub-title="abortReason">
      <template #extra>
        <Button type="primary" @click="routerToPath('/')">Back Home</Button>
      </template>
    </Result>
  </div>
 </div>
</template>

<script lang="ts" setup>
import {Button,Result} from 'ant-design-vue'
import { usePageContext } from 'vike-vue/usePageContext'
const ctx = usePageContext()
let { is404, abortReason,abortStatusCode } = ctx
if (!abortReason) {
  abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
}
function routerToPath(url){
  window.location.href = url
}
</script>
<style>
html,body{
  height: 100%;
  padding: 0;
  margin: 0;
}
#app{
  height: 100%;
}
.error_page{
  text-align: center;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  /* background:url('../../assets/Circles.png') no-repeat center; */
}
</style>
